<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城</title>
		<link rel="stylesheet" href="./css/clear.css">
		<link rel="stylesheet" href="./css/one.css">
		<!-- 字体图标 -->
		<link rel="stylesheet" href="./iconfont/iconfont.css">
		<link rel="stylesheet" href="./css/all.css">
		<!-- 网页图标 -->
		<link rel="icon" href="./img/mi.ico">
		<link rel="stylesheet" href="css/default.css">
		<link rel="stylesheet" href="css/main.css">
		
	</head>
	<body>
		<!-- 頂部導航條 -->
		<div class="topbar-wrapper">
			<!-- 内部容器 -->
			<!-- 左侧导航 -->
			<div class="topbar w">
				<ul class="service">
					<li>
						<a href="Shop.html">小米商城</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="main.html">小米官网</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">lOT</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">云服务</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">金融</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">有品</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">小爱开放平台</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">企业团购</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">资质证照</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">协议规则</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a  class="app" href="#">下載app
						<div class="qrcode">
							<img src="img/小米二维码.jpg" alt="">
							<br />
							<span>小米商城app</span>
						</div>
						</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">选择你的地理位置</a>
					</li>
				</ul>
			<!-- 购物车 -->
			<ul class="show-car">
				<li><a href="shopping.html">
				<i class="iconfont">&#xe601;</i>
				购物車(0)</a></li>
				<li class="ts">
					购物车中还没有商品，赶快选购吧。
				</li>
			</ul>
			<!-- 用户登录注册 -->
			<ul class="user-info">
				<li>
					<a href="#">消息通知</a>
				</li>
				<li class="line">|</li>
				<li>
					<a href="#">注冊</a>
				</li>
				<li class="line">|</li>
				<li>
					<a href="log.html">登录</a>
				</li>
				
			</ul>
			
			</div>
		</div>
		<!-- 创建外部头部容器 -->
		<div class="header-warpper">
			<div class="header w">
			<!-- 创建logo -->
			<h1 class="logo" title="小米">
				小米商场
				<a class="home" href="#"></a>
				<a href="#" class="mi"></a>
			</h1>
			<!-- 导航条-->
			<div class="nav-warpper">
		     <ul class="nav clearfix" style="background-color: rgb(255, 255, 255) ">
				 <li class="all-goods-wrapper"><a class="all-goods" href="#">全部商品分类</a>
				 <!-- 创建左侧导航-->
				 <ul class="left-menu">
					 <li><a href="#">手机 电话卡<i class="iconfont">&#xe625;</i></a></li>
					 <li><a href="#">电视 盒子<i class="iconfont">&#xe625;</i></a></li>
					 <li><a href="#">笔记本 平板<i class="iconfont">&#xe625;</i></a></li>
					 <li><a href="#">家电 插线板<i class="iconfont">&#xe625;</i></a></li>
					  <li><a href="#">出行 穿戴<i class="iconfont">&#xe625;</i></a></li>
					 <li><a href="#">智能 路由器<i class="iconfont">&#xe625;</i></a></li>
					 <li><a href="#">电源 配件<i class="iconfont">&#xe625;</i></a></li>
					 <li><a href="#">健康 儿童<i class="iconfont">&#xe625;</i></a></li>
					 <li><a href="#">耳机 音响<i class="iconfont">&#xe625;</i></a></li>
					  <li><a href="#">生活 箱包<i class="iconfont">&#xe625;</i></a></li>
				 </ul>
				 </li>
				  <li><a href="#1" style="color: black;">小米手机</a></li>
				   <li><a href="#1" style="color: black;">Reimi 红米</a></li>
				    <li><a href="#1" style="color: black;">电视</a></li>
					 <li><a href="#1" style="color: black;">笔记本</a></li>
					 <li><a href="#1" style="color: black;">家电</a></li>
					 <li><a href="#1" style="color: black;">路由器</a></li>
					 <li><a href="#1" style="color: black;">智能硬件</a></li>
					 <li><a href="#1" style="color: black;">服务</a></li>
					 <li><a href="#1" style="color: black;">社区</a></li>
					<div class="goods-infos"></div>
			 </ul>
			 <div class="search-warpper">
				 <form class="search" action="#">
					 <input class="search-inp" type="text">
					 <button class="search-bnt iconfont">&#xe613;</button>
				 </form>
			 </div>
			 </div>
			 
		</div>
		</div>
		<!-- 创建banner的容器 -->
		<div class="banner-wrapper">
			<div class="banner w">
			<ul class="img-list">
				<li><a href="#">
				<img src="img/bannner1.png" alt=""></a></li>
			</ul>
			<div class="pointer">
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
			<div class="prev-next">
				<a  class="prev" href=""></a>
				<a href="#" class="next"></a>
			</div>
	
			</div>
		</div>
	<div class="back-top">
		<ul >
			<li><i class="iconfont">&#xe692;</i>
			<div>手机App</div>
			</li>
			<li><i class="iconfont">&#xe692;</i>
			<div>个人中心</div>
			</li>
			<li><i class="iconfont">&#xec2e;</i>
			<div>人工客服</div>
			</li>
			<li><i class="iconfont">&#xe600;</i>
			<div>购物车</div>
			</li>
		</ul>
	</div>
	<!-- ad -->
	<div class="ad w">
		<ul class="short-cut">
			<li><a href="#"><i class="iconfont">&#xe637;</i>小米秒杀</a></li>
			<li><a href="#"><i class="iconfont">&#xe646;</i>企业团购</a></li>
			<li><a href="#"><i class="iconfont">&#xe647;</i>f卡通道</a></li>
			<li><a href="#"><i class="iconfont">&#xe647;</i>米粉卡</a></li>
			<li><a href="#"><i class="iconfont">&#xe637;</i>以旧换新</a></li>
			<li><a href="#"><i class="iconfont">&#xe638;</i>话费充值</a></li>
		</ul>
		<ul class="ad-img">
			<li><a href="#"><img src="img/ad-1.jpg" alt=""></a></li>
			<li><a href="#"><img src="img/ad-2.jpg" alt=""></a></li>
			<li><a href="#"><img src="img/ad-3.jpg" alt=""></a></li>
		</ul>
	</div>
	<div class="black"></div>
	<!-- phone展示 -->
    <div class="box" style="display: inline-block; vertical-align: middle;">
        <div class="top-message">
            <span>手机</span>
            <a href="">查看全部</a>
        </div>

        <div class="box1" style="display: inline-block; vertical-align: middle;">
            <img src="./img/xmad_15632723287643_WkFwH.jpg" alt="">
        </div>

        <div class="box2">
            <ul>
                <li>
                    <a href="">
                        <img src="./img/pms_1550642182.7527088!220x220.jpg" alt="">
                    </a>
                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img/pms_1537324004.08544830!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img/pms_1538019009.57772743!220x220.png" alt="">

                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img/pms_1547020972.223707!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img/pms_1554694214.08887531!220x220.png" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img/pms_1550642182.7527088!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img/pms_1550642182.7527088!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img/pms_1547020972.223707!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
            </ul>
        </div>

    </div>


    <div class="long-img">
        <a href="">
            <img src="./img/xmad_1565158413055_UEszn.jpg" alt="">
        </a>
    </div>


    <!-- 电脑、家电 -->
    <div class="box" style="display: inline-block; vertical-align: middle;">
        <div class="top-message">
            <span>电脑、家电</span>
            <a href="">查看全部</a>
        </div>

        <div class="double-box1" style="display: inline-block; vertical-align: middle;">
            <div>
                <a href="">
                    <img src="./img-appliance/xmad_15608266264545_qWIRv.jpg" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img-appliance/xmad_15608266614476_wdGNy.jpg" alt="">
                </a>
            </div>
        </div>

        <div class="box2">
            <ul>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1500287084.72131750!220x220.jpg" alt="">
                    </a>
                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1516975996.71444436!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1522318330.86967810!220x220.jpg" alt="">

                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1533266333.04566853!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1535103027.24861415!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1539315570.63599432!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1555935546.09711490!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-appliance/pms_1555947485.70419235!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
            </ul>
        </div>

    </div>


    <div class="long-img">
        <a href="">
            <img src="./img-appliance/xmad_15616416915404_oeXOL.jpg" alt="">
        </a>
    </div>

    <!-- 智能 -->
    <div class="box" style="display: inline-block; vertical-align: middle;">
        <div class="top-message">
            <span>智能生活</span>
            <a href="">查看全部</a>
        </div>

        <div class="double-box1" style="display: inline-block; vertical-align: middle;">
            <div>
                <a href="">
                    <img src="./img-intellgience/xmad_15616291664006_XWeFG.jpg" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img-intellgience/xmad_15501975795809_qmOCe.jpg" alt="">
                </a>
            </div>
        </div>

        <div class="box2">
            <ul>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1498564154.53184175!220x220.jpg" alt="">
                    </a>
                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1553484236.82631752!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1559728396.2634058!220x220.jpg" alt="">

                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1560056808.06921164!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1560151939.71121260!220x220.png" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1560158562.71434641!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1560222533.85047588!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
                <li>
                    <a href="">
                        <img src="./img-intellgience/pms_1560230039.18218237!220x220.jpg" alt="">
                    </a>

                    <p class="phone-name">小米9 6GB+1268GB</p>
                    <span>骁龙855，索尼4800万超广角</span>
                    <p class="cost">2599元</p>
                </li>
            </ul>
        </div>

    </div>

    <div class="long-img">
        <a href="">
            <img src="./img-intellgience/xmad_15649933951389_ErmZe.jpg" alt="">
        </a>
    </div>


    <div class="good-product">
       <p class="p1">热评产品</p>

        <ul>

            <li>
                <img src="./img-intellgience/xmad_15603261094939_GNcdD.jpg" alt="">
                <p class="p2">收到净水机后，马上就安排了安装，实在是难以表达内心的激动。首先作为一个米粉看到家里又添置一件小米的设...</p>
                <p class="p3">
                    <span class="ally">来自于 DEVIL 的评价</span>
                    <span class="thing">
                        小米净水器600G
                        <span class="line"></span>
                        <span class="money">1999元</span>
                    </span>
                </p>
            </li>

            <li>
                <img src="./img-critizim/xmad_15603254311846_Kxrnd.jpg" alt="">
                <p class="p2">收到净水机后，马上就安排了安装，实在是难以表达内心的激动。首先作为一个米粉看到家里又添置一件小米的设...</p>
                <p class="p3">
                    <span class="ally">来自于 DEVIL 的评价</span>
                    <span class="thing">
                        小米净水器600G
                        <span class="line"></span>
                        <span class="money">479元</span>
                    </span>
                </p>
            </li>

            <li>
                <img src="./img-critizim/xmad_15603259571867_NGpLV.jpg" alt="">
                <p class="p2">收到净水机后，马上就安排了安装，实在是难以表达内心的激动。首先作为一个米粉看到家里又添置一件小米的设...</p>
                <p class="p3">
                    <span class="ally">来自于 DEVIL 的评价</span>
                    <span class="thing">
                        小米净水器600G
                        <span class="line"></span>
                        <span class="money">2099元</span>
                    </span>
                </p>
            </li>

            <li>
                <img src="./img-critizim/xmad_15603271856346_WZBAr.jpg" alt="">
                <p class="p2">收到净水机后，马上就安排了安装，实在是难以表达内心的激动。首先作为一个米粉看到家里又添置一件小米的设...</p>
                <p class="p3">
                    <span class="ally">来自于 DEVIL 的评价</span>
                    <span class="thing">
                        小米净水器600G
                        <span class="line"></span>
                        <span class="money">199元</span>
                    </span>
                </p>
            </li>

        </ul>
    </div>
	
</html>